<template>
  <div class="home-container">
    <!-- 1.顶部栏 -->
    <van-nav-bar fixed placeholder>
      <!-- 左侧插槽  -->
      <template #left>
        <!-- <img src="../../assets/logo.png" alt="" width="100px"> -->
        <div class="logo"></div>
      </template>
      <!-- 右侧插槽 -->
      <template #right>
        <van-button icon="search" round type="primary">按钮</van-button>
      </template>
    </van-nav-bar>

    <!-- 2.tab栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell
              v-for="item in list"
              :key="item.art_id"
              :title="item.title"
              @click="$router.push({path:'/article',query:{id:item.art_id}})"
            >
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item v-for="(img, index) in item.cover.images" :key="index">
                    <van-image fit="cover" :src="img" lazy-load />
                  </van-grid-item>
                </van-grid>
                <!-- 底部额外信息区域 -->
                <div>
                  <span>{{ item.aut_name }}</span>
                  <span>{{ item.comm_count }}评论</span>
                  <span>{{ item.pubdate }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { getChannelList, getArticleList } from "./home.js";
export default {
  name: "home",
  data() {
    return {
      active: 0,
      loading: false, //上拉 加载更多动画
      finished: false, //上拉  加载全部数据开关
      list: [], //列表数据
      isLoading: false, //下拉 刷新动画
      channels: [],
      timestamp: null //默认不给值，发请求的时候获取当前时间戳就可以了
    };
  },
  async created() {
    let res = await getChannelList();
    this.channels = res.data.data.channels;
  },
  methods: {
    /* 1.上拉加载更多 */
    async onLoad() {
      /* 模拟ajax异步请求 */
      if (!this.timestamp) {
        this.timestamp = Date.now();
      }
      let res = await getArticleList({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp
      });
      //存储服务器返回的时间戳用于请求下一页数据
      this.timestamp = res.data.data.pre_timestamp;
      //添加数据
      this.list.push(...res.data.data.results);
      //(2)关闭加载动画
      this.loading = false;
      //(3)最多50条，如果所有元素加载完毕，则停止滚动
      if (this.list.length >= 50) {
        this.finished = true;
      }
    },
    /* 2.下拉刷新事件 */
    onRefresh() {
      //(0)一旦下拉刷新，无条件修改上拉列表finished为false
      this.timestamp = null;
      this.finished = false;
      //(1)清空当前数据
      this.list = [];
      //(2)重新加载数据
      this.loading = true;
      this.onLoad();
      //(3)关闭下拉刷新动画，否则顶部动画会一直转圈
      this.isLoading = false;
    },
    tabClick() {
      this.onRefresh();
    }
  }
};
</script>

<style lang="less">
.home-container {
  /* 1.顶部栏 */
  .van-nav-bar__content {
    background-color: #009afb;
    .logo {
      width: 100px;
      /* 注意点
      1.如果在背景图中使用@,则会默认前面加一个 ./@, 导致项目运行报错
      2.解决： 在@前面添加波浪号~,取消@前面的./
        ~@
      */
      background: url("~@/assets/logo.png") no-repeat;
      background-size: cover;
      height: 30px;
    }

    .van-button {
      background-color: #00affd;
      width: 100px;
      height: 30px;
      border: 1px solid transparent;
      .van-icon {
        color: #fff;
      }
    }
  }

  /* 2.tab栏 */

  .van-tabs {
    /* 头部区域 */
    .van-tabs__wrap {
      width: 100%;
      position: fixed;
      top: 46px;
      /* 添加层级避免被覆盖 */
      z-index: 10;
    }

    /* 底部内容 */
    .van-tabs__content {
      /* 解决tabs头部固定定位脱标遮挡标准流 */
      margin-top: 44px;
      margin-bottom: 0px;
    }
  }
}
</style>
